<template>
  <div id="relatives">
    <div class="tip">
      <md-notice-bar mode="link">添加业主家属，家属号无投票权，其他功能都可用</md-notice-bar>
    </div>
    <h2>添加家属</h2>
    <div class="shard">
      <span @click="navShareFolk">发送链接添加家属</span>
      <i class="update" @click="updateDate"></i>
    </div>
    <h2>已添加名单</h2>
    <div class="person-list">
      <div class="person-item" v-for="(item,index) in list.status1" :key="index">
        <div class="logo">
          <img :src="item.avatar" alt />
        </div>
        <span class="name">{{item.name}}</span>
        <i class="del" @click="removeFamily(item.uid)">
          <md-icon name="delete" size="lg" color="#999"></md-icon>
        </i>
      </div>
    </div>
    <h2>待确定名单</h2>
    <div class="person-list">
      <div class="person-item" v-for="(item,index) in list.status0" :key="index">
        <div class="logo">
          <img :src="item.avatar" alt />
        </div>
        <span class="name await">{{item.name}}</span>
        <i class="del" @click="removeFamily(item.uid)">
          <md-icon name="delete" size="lg" color="#999"></md-icon>
        </i>
        <i class="add" @click="addFamily(item.uid)"></i>
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import { NoticeBar, Toast, Icon, Dialog } from "mand-mobile";
export default {
  components: {
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog
  },
  name: "relatives",
  data() {
    return {
      list: []
    };
  },
  computed: {},
  methods: {
    updateDate(){
      this.getFamilyList();
    },
    navShareFolk() {
      this.$router.push({
        path: "/shareFolk",
        query: {
          yid: this.$store.state.userInfo.id,
          qid: this.$store.state.residentialType.qid,
          identity: 1
        }
      });
    },
    getFamilyList() {
      Toast.loading("加载中...");
      let params = {
        uid: this.$store.state.userInfo.id,
        qid: this.$store.state.residentialType.qid
      };
      https
        .fetchPost(config.getFamily, params)
        .then(res => {
           Toast.hide();
          if (res.data.code == 1) {
            this.list = res.data.data;
          } else {
            Toast.failed(res.data.msg, 2000);
          }
        })
        .catch(err => {
           Toast.hide();
          console.log(err);
        });
    },
    // 删除家属
    removeFamily(uid) {
      let _this = this;
      Dialog.confirm({
        title: "提示",
        content: "是否确认删除该申请",
        confirmText: "确定",
        onConfirm: () => {
          let params = {
            yid: _this.$store.state.userInfo.id,
            uid:uid,
            qid: _this.$store.state.residentialType.qid,
            status: 2
          };
          https
            .fetchPost(config.examineFamily, params)
            .then(res => {
              if (res.data.code == 1) {
                _this.getFamilyList();
              } else {
                Toast.failed(res.data.msg, 2000);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    },
    // 添加家属
    addFamily(uid) {
      Toast.loading("加载中...");
      let params = {
        yid: this.$store.state.userInfo.id,
        uid:uid,
        qid: this.$store.state.residentialType.qid,
        status: 1
      };
      https
        .fetchPost(config.examineFamily, params)
        .then(res => {
           Toast.hide();
          if (res.data.code == 1) {
            this.getFamilyList();
          } else {
            Toast.failed(res.data.msg, 2000);
          }
        })
        .catch(err => {
           Toast.hide();
          console.log(err);
        });
    }
    // 修改备注
    // saveTips(id, index) {
    //   console.log(this.upList[index]);
    //   let tips = this.upList[index].tips;
    //   let params = {
    //     id,
    //     tips
    //   };
    //   https
    //     .fetchPost(config.addTips, params)
    //     .then(res => {
    //       if (res.data.code == 1) {
    //         Toast.succeed("修改成功", 2000);
    //         setTimeout(() => {
    //           this.getFamilyList();
    //         }, 2000);
    //       } else {
    //         Toast.failed(res.data.msg, 2000);
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // }
  },
  created() {
    this.getFamilyList();
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#relatives {
  .tip {
    padding: 30px 40px 20px;
  }
  h2 {
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    font-size: 30px;
    &::before {
      content: "";
      display: block;
      height: 38px;
      border-left: 6px solid $themeGold;
      margin-right: 28px;
    }
  }
  .shard {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    padding: 0 30px;
    span {
      padding: 20px 30px;
      border-radius: 40px;
      color: #fff;
      background: #2f86f6;
      font-size: 28px;
    }
    .update {
      position: absolute;
      top: 50%;
      right: 140px;
      transform: translateY(-50%);
      display: block;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #d7b987 url("") no-repeat center center;
      background-size: 60%; 
    }
  }
  .person-list {
    padding: 20px 40px;
    .person-item {
      display: flex;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid #f2f2f2;
      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        img {
          height: 100px;
        }
      }
      .name {
        font-size: 32px;
        color: $themeColor;
        margin-left: 30px;
        width: 400px;
        padding-right: 10px;
        height: 60px;
        line-height: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.await {
          margin-right: 40px;
          width: 270px;
          height: 60px;
          line-height: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .remark {
        width: 150px;
        height: 50px;
        padding: 0 10px;
        border: 1px solid #ccc;
        font-size: 24px;
        border-radius: 8px;
        margin-right: 40px;
      }
      .del {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 96px;
        height: 96px;
      }
      .add {
        width: 96px;
        height: 96px;
        background: url("/static/images/my/add.png") center center no-repeat;
        background-size: 50%;
        margin-left: 10px;
      }
    }
  }
}
</style>
